const dark = {
	navigationBarColor: '#ffffff',
	themeColor: '#D1403C',
	backgroundColor: '#0E0E0E',
	backgroundColorCard: '#151515',
	backgroundColorClear: '#212121',
	textTitleColor: '#ffffff',
	textSubColor: '#626262',
	borderColor: '#2A2A2A',
	filterColor: 'rgba(19, 19, 20, 0.7)',
	shadowColor: '#131313'
}

const light = {
	navigationBarColor: '#000000',
	themeColor: '#f9343d',
	backgroundColor: '#F8F8F8',
	backgroundColorCard: '#FFFFFF',
	backgroundColorClear: '#f8f8f8',
	textTitleColor: '#333333',
	textSubColor: '#969696',
	borderColor: '#E7E7E7',
	filterColor: 'rgba(252, 252, 253, 0.7)',
	shadowColor: '#F8F9FA'
}

export default {
	namespaced: true,
	state: {
		// 是否防止滚动穿透
		overflow: false,

		/**
		 * time 为了触发getPageMetaStyle更新，否则主题不会及时改变
		 * todo: 为什么
		 */
		time: Date.now(),

		/**
		 * 主题颜色配置
		 */
		themeConfig: {
			theme: 'light', // | 'light'
			dark: {
				navigationBarColor: '#ffffff',
				themeColor: '#D1403C',
				backgroundColor: '#0E0E0E',
				backgroundColorCard: '#151515',
				backgroundColorClear: '#212121',
				textTitleColor: '#ffffff',
				textSubColor: '#626262',
				borderColor: '#2A2A2A',
				filterColor: 'rgba(19, 19, 20, 0.7)',
				shadowColor: '#131313'
			},
			light: {
				navigationBarColor: '#000000',
				themeColor: '#f9343d',
				backgroundColor: '#F8F8F8',
				backgroundColorCard: '#FFFFFF',
				backgroundColorClear: '#f8f8f8',
				textTitleColor: '#333333',
				textSubColor: '#969696',
				borderColor: '#E7E7E7',
				filterColor: 'rgba(252, 252, 253, 0.7)',
				shadowColor: '#F8F9FA'
			}
		},
	},
	getters: {
		//获取到总样式(挂到tabbar样式上)
		getPageMetaStyle(state) {
			const systemInfo = uni.getSystemInfoSync()
			const statusBarHeight = systemInfo.statusBarHeight === 0 ? 10 : systemInfo.statusBarHeight
			//设置状态栏高度变量
			const volume = `--my-status-bar-height: ${statusBarHeight}px; `

			const overflow = state.overflow ? 'overflow: hidden; ' : 'overflow: visible; '

			const curTheme = state.themeConfig[state.themeConfig.theme]

			const themeColor =
				`--theme-background-color-clear: ${curTheme.backgroundColorClear}; background-color: ${curTheme.backgroundColor}; --theme-shadow-color: ${curTheme.shadowColor}; --theme-filter-color: ${curTheme.filterColor}; --theme-color: ${curTheme.themeColor}; --theme-background-color: ${curTheme.backgroundColor}; --theme-background-color-card: ${curTheme.backgroundColorCard}; --theme-text-title-color: ${curTheme.textTitleColor}; --theme-text-sub-color: ${curTheme.textSubColor}; --theme-border-color: ${curTheme.borderColor};`

			return `--update-time: ${state.time}; ` + overflow + volume + themeColor
		},
		getCurTheme(state) {
			return state.themeConfig[state.themeConfig.theme]
		},
	},
	actions: {
		/**
		 *
		 * @param theme raw表示主题不变，但是重新执行以下setTabBarStyle、setBackgroundColor....
		 * @param options 有的页面颜色需要特殊情况，通过此处传入合并
		 */
		setTheme({
			state,
			getters
		}, theme, options) {
			state.time = Date.now()
			if (theme !== 'raw') {
				state.themeConfig.theme = theme
				uni.setStorageSync('theme', theme)
			}

			if (!!options) {
				Object.assign(state.themeConfig[state.themeConfig.theme], options)
			} else {
				state.themeConfig.dark = Object.assign({}, dark)
				state.themeConfig.light = Object.assign({}, light)
			}
			const mergeOptions = getters.getCurTheme

			if (typeof uni.setTabBarStyle === 'function') {
				uni.setTabBarStyle({
					color: mergeOptions.textSubColor,
					selectedColor: mergeOptions.themeColor,
					backgroundColor: mergeOptions.backgroundColorCard,
					fail: () => {}
				})
			}

			//todo：奇怪的的报错
			// #ifdef MP-WEIXIN
			if (typeof uni.setBackgroundColor === 'function') {
				uni.setBackgroundColor({
					backgroundColor: mergeOptions.backgroundColor,
					backgroundColorTop: mergeOptions.backgroundColor,
					backgroundColorBottom: mergeOptions.backgroundColor,
					fail: () => {}
				})
			}
			// #endif


			if (typeof uni.setNavigationBarColor === 'function') {
				uni.setNavigationBarColor({
					frontColor: mergeOptions.navigationBarColor,
					backgroundColor: '#fff',
					fail: () => {}
				})
			}
		},
	}
}